<template>
    <div class="pageSetContainer">
        <el-drawer
        title="页面属性设置"
        :visible.sync="showPageSet"
        size="270px"
        :before-close="closeALL">
            <div>
                <p class="bgColorTitle" style="float:inherit;">切换主题颜色</p>
                <ul id="spectrumPalette">
                    <li v-for="item in spectrumPaletteDate" :class="item.code===colors?'active':''" :key="item.id" :style="`background:${item.code}`" @click="setThemeColor(item)">
                        {{item.code}}
                        <i class="iconfont icon-icon-check"></i>
                    </li>
                    
                    <div class="clearfix"></div>
                </ul>
            </div>
            <div>
                <p class="bgColorTitle">背景颜色</p>
                <colorPicker v-model="bgColor" v-on:change="headleChangeColor" defaultColor="#fff" />
            </div>
            
            <div class="box">
                <p class="bgColorTitle">背景图片</p>
                <el-switch
                    :value="isBgImg" @change="changeSwitch">
                </el-switch>
            </div>
            <ul class="bgList" v-if="isBgImg">
                <li v-for="item in bgList" :key="item.id" :style="`background-image:url(${item.url})`" @click="changeBg(item)">
                    <span class="mask" v-show="item.id === activeBg">
                        <i class="iconfont icon-icon-check"></i>
                    </span>
                </li>
                <div class="clearfix"></div>
            </ul>

            <div class="box">
                <p class="bgColorTitle">显示小工具</p>
                <el-switch
                    :value="isShowTools" @change="changeShowTool">
                </el-switch>
            </div>

            <div class="box">
                <p class="bgColorTitle">显示浮动footer</p>
                <el-switch
                    :value="isShowFloatFooter" @change="changeFloatFooter">
                </el-switch>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import bus from '../../common/bus';
import { createNamespacedHelpers } from 'vuex';
// import appUtil from '~/assets/utils/appUtil.js';
const { mapState,mapMutations} = createNamespacedHelpers('themeModule');
const { mapState:homeMapState, } = createNamespacedHelpers('homeModule');
export default {
    name: 'pageSet',
    props:['showPageSet'],
    data () {
        return {
        };
    },
    inject: ['mainChannel'],
    computed: {
        ...mapState({
            bgColor: state => state.bgColor,
            isBgImg: state => state.isBgImg,
            activeBg: state => state.activeBg,
            bgList: state => state.bgList,
            isShowTools: state => state.isShowTools,
            isShowFloatFooter: state => state.isShowFloatFooter
        }),
        ...homeMapState({
            spectrumPaletteDate:state => state.spectrumPaletteDate,
            colors:state => state.colors
        })
    },
    methods: {
        // https://github.com/zuley/vue-color-picker

        ...mapMutations(['setChangeColor','setchangeBg','setChangeSwitch','setShowTool','setFloatFooter']),
        
        closeALL(){
            // 子组件调用父组件的方法
            this.$parent.closeALL();
        },
        // 设置主题颜色
        setThemeColor (item) {
            bus.$emit('setThemeColor',item);
            // this.mainChannel.postMessage({
            //     colors:'#'+item.code.slice(1,7),
            // });
        },
        // 改变背景色
        headleChangeColor(val){
            this.setChangeColor(val);
        },
        // 改变背景图片
        changeBg(item){
            this.setchangeBg(item);
        },
        // 切换是否展示背景图片
        changeSwitch(){
            this.setChangeSwitch();
        },
        // 切换是否展示小工具
        changeShowTool(){
            this.setShowTool();
        },
        // 切换是否展示底部footer
        changeFloatFooter(){
            this.setFloatFooter();
        }
    },
};
</script>

<style lang="scss" scoped>
.pageSetContainer{
    font-size: 12px;
    color: #666;
    .box{
        margin-top:18px;
    }
    #spectrumPalette{
        padding-bottom: 10px;
        li{
            width: 30px;
            height: 30px;
            border: 1px solid #d0d0d0;
            margin: 2px;
            float: left;
            font-size: 0;
            cursor: pointer;
            position: relative;
            text-align: center;
            line-height: 30px;
            i{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                color: #fff;
                font-size: 12px;
                display: none;
            }
            &.active{
                i{
                    display: block;
                }
            }
        }
        
        
    }
    .bgColorTitle{
        float: left;
        height: 20px;
        line-height: 20px;
        margin: 0 10px 0 0!important;
        font-size: 12px!important;
    }
    .bgList{
        margin-top:10px;
        li{
            width:60px;
            height: 60px;
            margin:0 4px 4px 0;
            float: left;
            background-size: cover;
            position: relative;
            .mask{
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.6);
                position: absolute;
                text-align: center;
                line-height: 60px;
                i{
                    color: #fff;
                    font-size: 14px;
                }
            }
        }
    }
     .el-drawer__header{
        padding: 10px 20px;
        border-bottom: 1px solid #eee;
        font-size: 14px!important;
        margin-bottom: 0;
    }
     .colorBtn{
        width:50px!important;
        height: 20px!important;
        border:1px solid #eee;
    }
}
</style>
